<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery基础</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/html.css">
</head>
<body>
<div class="container">
    <div class="catalogue">
        <div><a href="#jq_base">Jquery基础</a></div>
        <div><a href="#jquery_select">jQuery选择器</a></div>
        <div><a href="#jquery_event">jQuery事件</a></div>
        <div><a href="#jquery_animate">jQuery动画</a></div>
        <div><a href="#jquery_ajax">jQuery和Ajax</a></div>

    </div>
    <div class="substance">
        <div class="one">
            <h1 id="jq_base">Jquery基础
            |<a target="_blank" href="../demo/挂号平台/挂号平台demo.html">挂号平台Demo</a>
            |<a target="_blank" href="../demo/站点导航/four-all.html">站点导航Demo</a>
            </h1>
            <pre>
jQuery 官网: https://jquery.com
jQuery是一个JavaScript函数库; jQuery是一个轻量级的“写得少，做的多”的JavaScript库

返回的对象是 jQuery 对象: 类似数组,每个元素都是一个引用了 DOM 节点的对象;不会返回 undefined 或者 null;不必在下一行判断 if (div === undefined)
jQuery的作用
	 HTML 元素选取 			 HTML 元素操作
	 CSS 操作 				 HTML 事件函数
	 JavaScript 特效和动画 	 HTML DOM 遍历和修改
	 AJAX 				 Utilities

jQuery 的引入: 使用 jQuery 只需要在页面的 head 中引入 jQuery 文件即可;
jQuery 符号:jQuery 把所有功能全部封装在一个全局变量 jQuery 中，而 $也是一个合法的变量名，它是变量 jQuery 的别名
			绝大多数时候，我们都直接用 $。若 $ 变量已被占用，且不能改，就只能使用 jQuery 这个变量。

jQuery 的书写格式:
	 原始格式:  $(document).ready(function() { 		………… 		});
	缩写格式:    $().ready(function() { ………… });
				$(function() { ………… });
	原生格式:   window.onload = function() { ………… };
	$(`IdValue`).hide(); // 将一个HTML元素隐藏
	$(`IdValue`).css(`width`, `200px`); //把一个HTML元素的宽度变成200px


jQuery 选择器
	1）选择器允许您对元素组或单个元素进行操作。
	2）jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
jQuery 元素选择器
	jQuery 使用 CSS 选择器来选取 HTML 元素。
	$("p") 选取 p 元素。
	$("p.intro") 选取所有 class="intro" 的 p 元素。
	$("p#demo") 选取所有 id="demo" 的 p 元素。
jQuery 属性选择器
	jQuery 使用 XPath 表达式来选择带有给定属性的元素。
	$("[href]") 选取所有带有 href 属性的元素。
	$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
	$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
	$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
	jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为蓝色： $("p").css("background-color","blue");

选择器是jQuery的核心;返回的对象是jQuery对象;类似数组,每个元素都是一个引用了DOM节点的对象;不会返回undefined或者null;不必在下一行判断if(div === undefined)

			</pre>
        </div>
        <div class="one">
            <h1 id="jquery_select">jQuery选择器</h1>
            <table border="1" align="center">
                <caption>jQuery 选择器参考手册</caption>
                <tr><td>选择器</td><td>实例</td><td>选取</td></tr>
                <tr><td>*</td><td>$("*")</td><td>所有元素</td></tr>
                <tr><td>element</td><td>$("p")</td><td>所有 p 元素</td></tr>
                <tr><td>^</td><td>$("input[name^='news']")</td><td>选择所有的name属性以news开头的input元素</td></tr>
                <tr><td>#id</td><td>$("#lastname")</td><td>id="lastname" 的元素</td></tr>

                <tr style="background-color: #ADEAEA;text-align: center"><td colspan="3">层级选择器</td></tr>
                <tr><td>层级选择器</td><td>$('ancestor descendant');</td><td>在给定的祖先元素下匹配所有的后代元素。</td></tr>
                <tr><td>层级选择器</td><td>$('parent > child');</td><td>在给定的父元素下匹配所有的直接子元素</td></tr>
                <tr><td>层级选择器</td><td>$('prev + next');</td><td>匹配所有紧接在prev元素后的next元素</td></tr>
                <tr><td>层级选择器</td><td>$('prev ~ siblings');</td><td>匹配 prev 元素之后的所有 siblings 元素。</td></tr>
                <tr><td>多项选择器</td><td>$("selector1, selector2, selectorN");</td><td>将每一个选择器匹配到的元素合并后一起返回;可以指定任意多个选择器，并将匹配到的元素合并到一个结果内</td></tr>

                <tr style="background-color: #ADEAEA;text-align: center"><td colspan="3">类选择器</td></tr>
                <tr><td>.class</td><td>$(".intro")</td><td>所有 class="intro" 的元素</td></tr>
                <tr><td>.class.class</td><td>$(".intro.demo")</td><td>所有class="intro"且class="demo"的元素</td></tr>
                <tr style="background-color: #ADEAEA;text-align: center"><td colspan="3">属性选择器</td></tr>
                <tr><td>[attribute]</td><td>$("[href]")</td><td>所有带有 href 属性的元素</td></tr>
                <tr><td>[attribute=value]</td><td>$("[href='#']")</td><td>所有 href 属性的值等于 "#" 的元素</td></tr>
                <tr><td>[attribute!=value]</td><td>$("[href!='#']")</td><td>所有 href 属性的值不等于 "#" 的元素;等价于 [attribute^=value]</td></tr>
                <tr><td>[attribute$=value]</td><td>$("[href$='.jpg']") </td><td>所有 href 属性的值包含以 ".jpg" 结尾的元素;等价于 [attribute*=value]</td></tr>
                <tr><td>[attribute][attribute]</td><td>$("input[id][name$='man']")</td><td>可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素</td></tr>
                <tr style="background-color: #ADEAEA;text-align: center"><td colspan="3">位置筛选器</td></tr>
                <tr><td>:first</td><td>$("p:first")</td><td>第一个p 元素</td></tr>
                <tr><td>:last</td><td>$("p:last")</td><td>最后一个p 元素</td></tr>
                <tr><td>:even</td><td>$("tr:even")</td><td>所有偶数tr元素</td></tr>
                <tr><td>:odd</td><td>$("tr:odd")</td><td>所有奇数tr元素</td></tr>
                <tr><td>:eq(index)</td><td>$("ul li:eq(3)")</td><td>列表中的第四个元素（index 从 0 开始）</td></tr>
                <tr><td>:gt(no)</td><td>$("ul li:gt(3)")</td><td>列出 index 大于 3 的元素</td></tr>
                <tr><td>:lt(no)</td><td>$("ul li:lt(3)")</td><td>列出 index 小于 3 的元素</td></tr>

                <tr style="background-color: #ADEAEA;text-align: center"><td colspan="3">过滤器</td></tr>
                <tr><td>:first-child</td><td> 	$("div span:first-child") </td><td>返回所有的 div 元素的第一个子节点的数组</td></tr>
                <tr><td>:last-child </td><td>	$("div span:last-child") </td><td>返回所有的 div 元素的最后一个节点的数组</td></tr>
                <tr><td>:only-child </td><td>	$("div button:only-child")</td><td> 返回所有的 div 中只有唯一一个子节点的所有子节点的数组</td></tr>
                <tr><td>:first-of-type </td><td>	$("p:first-of-type") </td><td>选取属于其父元素的第一个p元素的每个p元素</td></tr>
                <tr><td>:last-of-type </td><td>	$("p:last-of-type") </td><td>选取属于其父元素的最后一个p元素的每个p元素</td></tr>
                <tr><td>:nth-child(n|even|odd|formula)</td><td>	$("p:nth-child(3)") </td><td>选取属于其父元素的第三个子元素的每个p元素</td></tr>
                <tr><td>:nth-last-child() </td><td>	$("p:nth-last-child(3)") </td><td>选取属于其父元素的第三个子元素的p元素，从最后一个子元素开始计数</td></tr>
                <tr><td>:nth-of-type() </td><td>	$("p:nth-of-type(3)")</td><td> 选取属于其父元素的第三个p元素的每个p元素</td></tr>
                <tr><td>:nth-last-of-type() </td><td>	$("p:nth-last-of-type(3)")</td><td> 选取属于其父元素的第三个p元素的每个p元素,从最后一个子元素开始计数</td></tr>
                <tr><td>:only-of-type </td><td>	$("p:only-of-type") </td><td>选取属于其父元素的唯一p元素的每个p元素</td></tr>

                <tr style="background-color: #ADEAEA;text-align: center"><td colspan="3">表单筛选器</td></tr>
                <tr><td>:input</td><td>$(":input") </td><td>所有input元素(可以选择input，textarea，select和button)</td></tr>
                <tr><td>:text</td><td>$(":text") </td><td>所有type="text"的input元素</td></tr>
                <tr><td>:password</td><td>$(":password") </td><td>	所有 type="password" 的 input元素</td></tr>
                <tr><td>:radio</td><td>$(":radio") </td><td>	所有 type="radio" 的input 元素</td></tr>
                <tr><td>:checkbox</td><td>$(":checkbox") </td><td>	所有 type="checkbox" 的 input 元素</td></tr>
                <tr><td>:submit </td><td>	$(":submit") </td><td>	所有 type="submit" 的input元素</td></tr>
                <tr><td>:reset 	</td><td>	$(":reset") </td><td>	所有 type="reset" 的input元素</td></tr>
                <tr><td>:button </td><td>	$(":button")</td><td> 	所有 type="button" 的input元素</td></tr>
                <tr><td>:image 	</td><td>	$(":image") </td><td>	所有 type="image" 的input 元素</td></tr>
                <tr><td>:file 	</td><td>	$(":file") </td><td>		所有 type="file" 的input元素</td></tr>
                <tr><td>:enabled </td><td>	$(":enabled")</td><td> 	所有激活的 input 元素</td></tr>
                <tr><td>:disabled </td><td>	$(":disabled") </td><td>	所有禁用的 input 元素</td></tr>
                <tr><td>:selected </td><td>	$(":selected")</td><td> 	所有被选取的 input 元素</td></tr>
                <tr><td>:focus </td><td>	$(":focus") 	</td><td>选取当前具有焦点的元素</td></tr>
                <tr><td>:checked </td><td>	$(":checked") </td><td>	所有被选中的 input 元素</td></tr>

                <tr style="background-color: #ADEAEA;text-align: center"><td colspan="3">内容筛选器</td></tr>
                <tr><td>:empty </td><td>	$(":empty") </td><td>无子（元素）节点的所有元素</td></tr>
                <tr><td>:has(selector) </td><td>	$("p:has(span)")</td><td> 选取所有包含有span元素在其内的p元素</td></tr>
                <tr><td>:parent </td><td>	$("td:parent") </td><td>选取所有带有子元素且包含文本的td元素</td></tr>
                <tr><td>:contains(text) 	</td><td>$(":contains('W3School')") </td><td>包含指定字符串的所有元素其他筛选器</td></tr>

                <tr style="background-color: #ADEAEA;text-align: center"><td colspan="3">查找和过滤</td></tr>
                <tr style="background-color: #ADEAEA;text-align: center"><td colspan="3">find(expr | object | element)  搜索所有与指定表达式匹配的元素</td></tr>
                <tr style="background-color: #ADEAEA;text-align: center"><td colspan="3">children([expr])  取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。</td></tr>
                <tr style="background-color: #ADEAEA;text-align: center"><td colspan="3">parent([expr])   取得一个包含着所有匹配元素的唯一父元素的元素集合</td></tr>
                <tr style="background-color: #ADEAEA;text-align: center"><td colspan="3">next([expr])、prev([expr])  取得一个包含匹配的元素集合中每一个元素紧邻的后面（前面）同辈元素的元素集合</td></tr>
                <tr style="background-color: #ADEAEA;text-align: center"><td colspan="3">eq(index | -index)  获取当前链式操作中第 N 个 jQuery 对象</td></tr>
                <tr style="background-color: #ADEAEA;text-align: center"><td colspan="3">siblings([expr])      取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合</td></tr>
                <tr style="background-color: #ADEAEA;text-align: center"><td colspan="3">filter(expr | object | element | fn)    筛选出与指定表达式匹配的元素集合</td></tr>
                <tr style="background-color: #ADEAEA;text-align: center"><td colspan="3">not(expr | element | fn)   从匹配元素的集合中删除与指定表达式匹配的元素</td></tr>
                <tr style="background-color: #ADEAEA;text-align: center"><td colspan="3">first()、last()、slice(start, [end])    first()获取第一个元素；last()获取最后个元素；slice()选取一个匹配的子集</td></tr>

                <tr style="background-color: #ADEAEA;text-align: center"><td colspan="3">其他筛选器</td></tr>
                <tr><td>:lang(language) </td><td>	$("p:lang(it)") </td><td>选取所有 lang 属性为 "it" 的p元素</td></tr>
                <tr><td>:root :	</td><td>	</td><td>	root 选择器选取文档的根元素。</td></tr>
                <tr><td>:target </td><td>		</td><td>:target 选择器可用于选取当前活动的目标元素</td></tr>
                <tr><td>:not(selector) </td><td>	$("input:not(:empty)") </td><td>	所有不为空的 input 元素</td></tr>
                <tr><td>:hidden</td><td>$("p:hidden")</td><td>所有隐藏的p元素</td></tr>
                <tr><td>:visible</td><td>$("table:visible")</td><td>所有可见的表格</td></tr>
                <tr><td>:header</td><td>$(":header")</td><td>所有标题元素h1-h6</td></tr>
                <tr><td>:animated </td><td></td><td>所有动画元素</td></tr>
                <tr><td>:not(selector)</td><td>$("input:not(:empty)")</td><td>所有不为空的 input 元素</td></tr>
                <tr><td>:contains(text)</td><td>$(":contains('W3School')")</td><td>包含指定字符串的所有元素</td></tr>
            </table>
        </div>
        <div class="one">
            <h1 id="jquery_event">jQuery事件</h1>
            <pre class="bj">
事件类型
	 鼠标事件   键盘事件    其它事件  	 事件参数     事件绑定与取消

鼠标事件
	 click([[data], fn])、dblclick([[data], fn])  click：鼠标单击时触发；dblclick：鼠标双击时触发。
	 mouseenter、mouseleave、mousemove  鼠标进入（移出）、（在 DOM 内部移动）时触发。
	 hover([over,]out)  鼠标进入和退出时触发两个函数，相当于 mouseenter 加上mouseleave。
	 mousedown、mouseup  mousedown：鼠标按下时触发；mouseup：按下的鼠标放松时触发。
	 mouseover、mouseout 鼠标进入（移出）指定元素及其子元素时触发。
	 scroll([[data],fn]) 当滚动指定的元素时，会发生scroll 事件。
键盘事件
	 keydown([[data], fn])  当键盘或按钮被按下时，发生 keydown 事件。
	 keyup([[data], fn])    当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
	 keypress([[data], fn])    当键盘或按钮被按下时，发生 keypress 事件。
其它事件
	 ready(fn)   当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
	 focus([[data], fn])、blur([[data], fn])   当元素获得（失去）焦点时触发 focus(blur)事件。
	 resize([[data], fn])   当调整浏览器窗口的大小时，发生 resize 事件。
	 change([[data], fn])   当元素的值发生改变时，会发生 change 事件。
	 select([[data], fn])    当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
	 submit([[data], fn])    当提交表单时，会发生 submit 事件。

事件参数
	 event   有些事件，如 mousemove 和 keypress ，我们需要获取鼠标位置和按键的值，否则监听这些事件就没什么意义了。所有事件都会传入 event 对象作为参数，可以从 event 对象上获取到更多的信息。
事件绑定与取消
	 on(events,[selector],[data],fn)  在选择元素上绑定一个或多个事件的事件处理函数。
	 off(events,[selector],[fn])   在选择元素上移除一个或多个事件的事件处理函数。
	 one(type,[data],fn)       为每一个匹配元素的特定事件（比如click）绑定一个一次性的事件处理函数。


			</pre>
        </div>
        <div class="one">
            <h1 id="jquery_animate">jQuery动画</h1>
            <pre class="bj2">
今日主打:  自定义动画   计时器   动画函数   动画DOM及其CSS操作
动画DOM及其CSS操作
	原理:我们只需要以固定的时间间隔（例如，0.1秒），每次把DOM元素的CSS样式修改一点（例如，高宽各增加10%），看起来就像动画了。
自定义动画:
	animate()  可以实现任意动画效果，需要传递的参数是DOM元素最终的CSS状态和时间。
		var div = $('#test-animate’);
		div.animate({ opacity: 0.25,
		width: '256px’,
		height: '256px' }, 3000);
	delay()  方法可以实现动画暂停。

动画函数
	Show/hide: 直接以无参形式调用show（）和hide（），会显示和隐藏DOM元素，但是只要传递一个时间参数进去，就变成了动画。
		var div = $('#test-show-hide’);
		div.hide(3000); // 在3秒钟内逐渐消失
	toggle() 法则根据当前状态决定是show()和hide()
	fadeIn / fadeOut  动画淡入淡出，也就是通过不断地设置DOM元素的opacity属性来实现。
	fadeToggle() 据元素是否可见来决定下一步动作动画函数
	slideUp / slideDown 垂直方向逐渐收缩或展开
	slideToggle() 根据元素是否可见来进行下一步动作
	计时器: setTimeout setInterval


animate()方法
	作用：animate() 方法执行 CSS 属性集的自定义动画。
	说明：该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS 属性值是逐渐改变的，这样就可以创建动画效果。
	注意：只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如"background-color:red"）。
	语法 1:
		$(selector).animate(styles,speed,easing,callback)
		具体参数含义: 注释：CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS名称（比如 "font-size"）。
			styles: 必需。规定产生动画效果的 CSS 样式和值。可能的 CSS 样式值（提供实例）
						backgroundPosition 		borderWidth   	borderBottomWidth 		borderLeftWidth
						borderRightWidth 		borderTopWidth 	borderSpacing 			margin
						marginBottom 			marginLeft 		marginRight  			marginTop
						outlineWidth 			padding  		paddingBottom  			paddingLeft
						paddingRight  								paddingTop					height					width
						maxHeight					maxWidth					minHeight					minWidth
						font					fontSize					bottom					left
						right					top					letterSpacing					wordSpacing
						lineHeight					textIndent
			speed 可选。规定动画的速度。默认是 "normal"。可能的值：毫秒 （比如 1500）、"slow"、"normal"、"fast"
			easing 可选。规定在不同的动画点中设置动画速度的 easing 函数。内置的 easing 函数：swing、linear扩展插件中提供更多 easing 函数。
			callback 可选。animate 函数执行完之后，要执行的函数。
	语法 2：
		$(selector).animate(styles,options
		具体参数含义如下：
			styles 必需。规定产生动画效果的 CSS 样式和值（同上）。
			options 可选。规定动画的额外选项。
					可能的值： speed - 设置动画的速度    easing - 规定要使用的 easing 函数   callback - 规定动画完成之后要执行的函数
							step - 规定动画的每一步完成之后要执行的函数    queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
							specialEasing - 来自styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数



show()、hide()
一、show() 方法定义和用法： show() 方法：如果被选元素已被隐藏，则显示这些元素
	语法： $(selector).show(speed,callback)
	具体参数如下：
			speed 可选。规定元素从隐藏到完全可见的速度。默认为 "0"。
				可能的值：毫秒 （比如 1500）、"slow"、"normal"、"fast"在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。
			callback 可选。show 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。
	注意：
		1、如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。
		2 该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。
二、hide() 方法定义和用法： hide() 方法：如果被选的元素已被显示，则隐藏该元素。
	语法：$(selector).hide(speed,callback)
	具体参数含义：
			speed 可选。规定元素从可见到隐藏的速度。默认为 "0"。
				可能的值：毫秒 （比如 1500）、"slow"、"normal"、"fast"在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。
	callback 可选。hide 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。
	注意：如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。



toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。该方法也可用于切换被选元素的 hide() 与 show() 方法。
作用 1: 切换 Hide() 和 Show()：检查每个元素是否可见。
	如果元素已隐藏，则运行 show()。如果元素可见，则元素 hide()。这样就可以创造切换效果。
	语法：$(selector).toggle(speed,callback)
	参数具体含义：
		speed 可选。规定 hide/show 效果的速度。默认是 "0"。可能的值：毫秒（比如 1500）、"slow"、"normal"、"fast"
		callback 可选。当 toggle() 方法完成时执行的函数。
作用 2：显示或隐藏元素：规定是否只显示或只隐藏所有匹配的元素。
	语法 2：$(selector).toggle(switch)
	参数具体含义：
		switch 必需。布尔值，规定 toggle() 是否应只显示或只隐藏所有被选元素。true:显示元素   false:隐藏元素
作用 3：（用的不多，不是必备的，有兴趣的话了解一下即可） 向 Toggle 事件绑定两个或更多函数：
	当指定元素被点击时，在两个或多个函数之间轮流切换。如果规定了两个以上的函数，则 toggle() 方法将切换所有函数。
	例如，如果存在三个函数，则第一次点击将调用第一个函数，第二次点击调用第二个函数，第三次点击调用第三个函数。第四次点击再次调用第一个函数，以此类推。
	$(selector).toggle(function1(),function2(),functionN(),...)
	参数
		function1() 必需。规定当元素在每偶数次被点击时要运行的函数。
		function2() 必需。规定当元素在每奇数次被点击时要运行的函数。
		functionN(),... 可选。规定需要切换的其他函数。


fadeIn() 和 fadeOut()
一、fadeOut()定义和用法
fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。
语法：$(selector).fadeOut(speed,callback)
具体参数含义如下：
	speed 可选。规定元素从可见到隐藏的速度。默认为 "normal"。
		可能的值：毫秒 （比如 1500） "slow"  "normal"  "fast" 在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其透明度（这样会创造淡出效果）。
	callback 可选。fadeOut 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。
	注意：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。
二、fadeIn() 定义和用法
fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。
语法：$(selector).fadeIn(speed,callback)
参数
	speed 可选。规定元素从隐藏到可见的速度。默认为 "normal"。
		可能的值：毫秒 （比如 1500） "slow"  "normal"  "fast" 在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其透明度（这样会创造淡入效果）。
	callback 可选。fadeIn 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。
	注意：
	1、如果元素已经显示，则该效果不产生任何变化，除非规定了 callback 函数。
	2、该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。



fadeToggle( )
定义和用法：fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
	如果元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。
	如果元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。
语法： $(selector).fadeToggle(speed,easing,callback)
参数具体含义：
	speed 可选。规定褪色效果的速度。 可能的值：毫秒、"slow"、"fast"
	easing 可选。规定在动画的不同点上元素的速度。默认值为 "swing"。
	可能的值：   "swing" - 在开头/结尾移动慢，在中间移动快    "linear" - 匀速移动  提示：扩展插件中提供更多可用的 easing 函数。
	callback 可选。fadeToggle() 方法执行完之后，要执行的函数。




slideUp()slideDown()
一、slideDown()定义和用法  slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。
语法：$(selector).slideDown(speed,callback)
参数
	speed 可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。可能的值：毫秒 （比如 1500）、"slow"、"normal"、"fast"在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其高度。
	callback 可选。slideDown 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。
	注意：
		1、如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。
		2、该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。
二、slideUp()定义和用法  通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。
语法：$(selector).slideUp(speed,callback)
参数:
	speed 可选。规定元素从可见到隐藏的速度(或者相反).默认为 "normal";可能的值：毫秒 （比如 1500）、"slow"、"normal"、"fast"在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度（这样会创造滑动效果）。
	callback 可选。slideUp 函数执行完之后，要执行的函数。	除非设置了 speed 参数，否则不能设置该参数。
	注意：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。


slideToggle()
定义和用法： slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。
语法：$(selector).slideToggle(speed,callback)
参数具体含义：
	speed 可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。可能的值：毫秒 （比如 1500）、"slow"、"normal"、"fast" 在设置速度的情况下，元素在切换的过程中，会逐渐地改变其高度（这样会创造滑动效果）。
	callback 可选。toggle 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。
	注意：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。

			</pre>
        </div>
        <div class="one">
            <h1 id="jquery_ajax">jQuery和Ajax</h1>
            <pre class="bj">
PHP 集成环境 WampServer 使用教程
一、WampServer 安装完成后，电脑右下角会有一个图标，注意图标的变化，图标会有红
色变成橙色，再变成绿色，变成绿色即为安装成功，这个时候鼠标单击右下角的绿色图标，
二、然后找到 www directory 并且点击三、在弹出的窗口中，将项目文件夹复制粘贴进来（将所有的 html、css、js、json、php文件统一放在一个文件夹中，在复制粘贴进来即可）
四、然后打开浏览器，在地址栏中输入 ocalhost/你的文件夹名字/（譬如我复制粘贴到 www中的文件夹的名字是 demo，那么我就在地址栏中输入 localhost/demo/按下回车键即可
访问这个文件夹中所有的文件，这个时候点击下方列表中自己想要测试的 html 文件，即可进行测试预览



jQuery 中 each 遍历方法
1、定义：jQuery.each() 函数用于遍历指定的对象和数组，也可以写为$.each()
2、语法： $.each( object, function(index,value){} )
参数： 	object Object 类型，指定需要遍历的数据
		function(index,value){} 指定用于循环执行的函数。 *index 数组索引或者对象属性名  *value 数组项或者对象属性值
注意：遍历的数据通常是数组，json，DOM 等


eval()的用法 注：实际开发中不常用，作为了解即可。
1.作用   eval()函数可以将字符串解析为 JavaScript 代码执行。
2.语法   eval(string) 参数 string 是必需的，其中包含要执行的 JavaScript 代码。
3.实例
例 1  	eval("m=10;n=20;document.write(n-m)")
		eval()方法把上面的字符串作为一段 js 代码执行，所以页面中会输出 n-m的计算结果： 10
例 2	eval("alert('hello')")
		上面的字符串中包含了一个 alert，所以页面会弹出一个弹窗：
例 3	eval("console.log(a)")
		上面字符串中，console.log 输出一个 a，但是这个变量 a 没有输出定义，则会报错



Ajax与Json
什么是Ajax？
	Ajax的全称是Asynchronous JavaScript and XML（即异步的 JavaScript和 XML，它并不是一种新的编程语言，而是几种原有技术的结合体
	ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
为什么要使用Ajax？
Ajax的优点：
	 通过异步模式，提升了用户体验
	 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
	 Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载
Ajax的缺点：
	 不支持浏览器back按钮
	 安全问题 AJAX暴露了与服务器交互的细节
	 对搜索引擎的支持比较弱

什么是XMLHttpRequest？ 是一种支持异步请求的技术，它是Ajax的核心
XMLHttpRequest的作用
	 可以向服务器提出请求并处理响应，而不阻塞用户
	 可以在页面加载以后进行页面的局部更新
如何使用Ajax? 要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤
	 创建XMLHttpRequest对象,也就是创建一个异步调用对象
	 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL
	 设置响应HTTP请求状态变化的函数
	 发送HTTP请求
	 获取异步调用返回的数据
	 使用JavaScript和DOM实现局部刷新

如何创建HTTP请求
语法：open(method,url,async)
功能：创建HTTP请求，规定请求的类型、URL及是否异步处理请求
参数说明：
	 method：请求类型，GET或POST
	 url：文件在服务器上的位置
	 async：true(异步)或false(同步)
	 注意事项：
		open方法不会向服务器发送真正请求，它相当于初始化请求并准备发送只	能向同一个域中使用相同协议和端口的URL发送请求，否则会因为安全原因报错
		URL参数是open()方法中唯一一个必须要指定的参数，用来设置服务器上文件的地址，该文件可以是任何类型的文件，如 .txt 和 .xml，或者服务器脚本文件，如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）
GET与POST的区别
	与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用，然而，在以下情况中，必须使用 POST 请求：
		 无法使用缓存文件（更新服务器上的文件或数据库）
		 向服务器发送大量数据（POST 没有数据量限制）
		 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
同步与异步的区别
	 同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
	 异步: 请求通过事件触发->服务器处理(这时浏览器仍然可以作其他事情)->处理完毕
	 说明：async是一个布尔值。如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作

设置响应HTTP请求状态变化的函数: 请求发往服务器 -> 服务器根据请求生成响应 -> 传回给XHR对象
设置响应HTTP请求状态变化的函数在收到响应后相应数据会填充到XHR对象的属性，有四个相关属性会被填充：
	 responseText——从服务器进程返回数据的字符串形式
	 responseXML——从服务器进程返回的DOM兼容的文档数据对象
	 status——从服务器返回的数字代码，如404（未找到）和200（已就绪）
	 status Text——伴随状态码的字符串信息
如何发送请求
	 语法：send(string)
	 功能：将请求发送到服务器
	 参数说明：string仅用于post请求
	 注意事项：仅在POST请求时可以传入参数，不需要则发送null，在调用send方法之后请求被发往服务器
如何添加HTTP头
	 如果需要像 HTML 表单那样 POST 数据，需使用 setRequestHeader()来添加 HTTP 头，然后在 send() 方法中规定希望发送的数据
	 语法：xmlhttp.setRequestHeader(header,value)
	 使用：xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
什么是JSON？ JSON( javascript object notation)全称是javascript对象表示法，它是一 种数据交换的文本格式，而不是一种编程语言，用于读取结构化数据，2001年由Douglas Crockford提出，目的是取代繁琐笨重的XML格式
JSON的语法可以表示以下三种类型的值：
	 简单值： 简单值使用与JavaScript相同的语法，可以在JSON中表示字符串、数值、布尔值和null
			  字符串必须使用双引号表示，不能使用单引号，数值必须以十进制表示，且不能使用NaN和Infinity
			 说明：JSON不支持JavaScript中的特殊值undefined
	 对象:  对象作为一种复杂数据类型，表示的是一组有序的键值对儿，而每个键值对儿中的值可以是简单值，也可以是复杂数据类型的值
			JSON中对象的键名必须放在双引号里面，因为JSON不是javascript语句，所以没有末尾的分号
			说明：同一个对象中不应该出现两个同名属性
	 数组：  数组也是一种复杂数据类型，表示一组有序的值的列表，可以通过数值索引来访问其中的值
			说明：数组或对象最后一个成员的后面，不能加逗号

JSON对象的两个方法：
	 stringify()
		语法：JSON.stringify()
		功能：用于将一个值转为字符串，该字符串应该符合JSON格式，并且可以被JSON.parse()方法还原
	 parse()
		语法：JSON.parse()
		功能：用于将JSON字符串转化成对象
JSON对象总结
	 JSON之所以流行，是因为可以把JSON数据结构解析为有用的javascript对象
	 JSON对象的stringify()和parse()这两个方法可以分别用于把JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生JavaScript值
	 JavaScript的eval()类似于JSON.parse()方法，可以将json字符串转换为json对象，但是，eval()可以执行不符合JSON格式的代码，有可能会包含恶意代码，所以尽量少用
jQuery的ajax方法
	 $.ajax()
	 $.get()
	 $.post()
	 $.getJson()




JQ插件开发方法
	1. 通过$.extend()来扩展jQuery
				$.extend({
					sayHello: function() { console.log('Hello!');}
				})
				$.sayHello();

	2. 通过$.fn 向jQuery添加新的方法
				$.fn.blue = function() {
					this.css(‘background-color', 'blue');
				}
				$(‘div’).blue();
				$(‘body’).blue();

	3. 通过$.widget()应用jQuery UI的部件工厂方式创建


切图工具: PxCook    MarkMan






			</pre>
        </div>


    </div>
</div>
</body>
</html>